<template>
    <div class="widget-container">
        <el-tabs v-model="state.activeTab" class="tabs">
            <el-tab-pane label="组件库" name="controls">
                <el-collapse v-model="state.activeCollapse" >
                    <el-scrollbar :height="state.scrollerHeight">
                        <el-collapse-item title="布局控件" name="1">
                            <draggable  
                                tag="ul" 
                                :list="state.layoutControlList" 
                                item-key="key"
                                animation="300"
                                :group="{name: 'dragGroup', pull: 'clone', put: false}"
                                :sort="false"
                                :clone="handleContainerWidgetClone"
                                :move="checkContainerMove"
                            >
                                <template #item="{element}">
                                    <li class="item">
                                        <Icon :icon="element.icon"/>
                                        <span class="title ml-5">{{ element.options.displayName }}</span>
                                    </li>
                                </template>
                            </draggable >
                        </el-collapse-item>
                        <el-collapse-item title="基础控件" name="2">
                            <draggable  
                                tag="ul"
                                :list="state.basicControlList"
                                ghost-class="ghost" 
                                :sort="false"
                                animation="300"
                                item-key="key"
                                :group="{name: 'dragGroup', pull: 'clone', put: false}"
                                :clone="handleFieldWidgetClone"
                                :move="checkFieldMove"
                            >
                                <template #item="{element}">
                                    <li class="item">
                                        <Icon :icon="element.icon"/>
                                        <span class="title ml-5">{{ element.options.displayName }}</span>
                                    </li>
                                </template>
                            </draggable >
                        </el-collapse-item>
                    </el-scrollbar>
                </el-collapse>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup lang="ts">
import { reactive ,onMounted,onUnmounted, nextTick, onBeforeMount} from 'vue';
import {throttle} from 'lodash-es'
import { setId } from '@/utils';
import {containers as LAYOUTLIST,basicFields as BASICLIST} from './config.ts'
import Icon from '@/components/icons/index.vue'
import draggable   from 'vuedraggable'

const props = defineProps({
    designer:{
        type:Object,
        default:()=>({})
    }
})

const state = reactive<any>({
    layoutControlList:[],
    basicControlList:[],
    activeTab: 'controls',
    activeCollapse:["1","2"],
    formTemplateList:[],
    scrollerHeight:'0px'
})

const onContainerDragEnd = (evt:any)=>{
    // console.log('Drag end of container: ')
    // console.log(evt)
}

// 设置允许哪些元素可以拖拽
const checkContainerMove = (evt:any) => {
    // console.log('checkContainerMove',evt);
    return props.designer.checkWidgetMove(evt)
}

const handleContainerWidgetClone = (origin:any)=>{
    console.log(origin)
    return props.designer.copyNewContainerWidget(origin)
    // console.log('handleContainerWidgetClone',origin.item.__draggable_context.element);
    // return props.designer.copyNewContainerWidget(origin.item.__draggable_context.element)
}

const checkFieldMove = (evt:any) => {
    // console.log('checkFieldMove',evt);
    return props.designer.checkFieldMove(evt)
}

const handleFieldWidgetClone = (origin:any)=>{
    return props.designer.copyNewFieldWidget(origin)
    // console.log('handleFieldWidgetClone',origin.item.__draggable_context.element);
    // return props.designer.copyNewFieldWidget(origin.item.__draggable_context.element)
}

const loadWidget = ()=>{
    state.layoutControlList = LAYOUTLIST.map(item=>{
        return {
            ...item,
            key:setId()
        }
    }).filter(item=> !item.internal)
    state.basicControlList = BASICLIST.map(item=>{
        return {
            ...item,
            key:setId()
        }
    })
}

onBeforeMount(()=>{
    loadWidget()
})

onMounted(()=>{

})

const setScrollHeight = throttle((e)=>{
    nextTick(()=>{
        state.scrollerHeight = e.target.innerHeight - 115 + 'px'
    })
},300)

onMounted(()=>{
    state.scrollerHeight = window.innerHeight - 115 + 'px'
    window.addEventListener('resize',setScrollHeight)
})
onUnmounted(()=>{
    window.removeEventListener('resize',setScrollHeight)
})
</script>

<style lang="scss" scoped>
:deep(.el-tabs){
    .el-tabs__nav{
        width: 100%;
            .el-tabs__item {
            width: 50%;
        }
    }
}
:deep(.el-collapse-item){
    padding: 0 0 0 10px;
}
:deep(.el-collapse-item__content){
    ul{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        width: 97%;
    }
    li.item{
        box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
        width: 45%;
        list-style: none;
        background-color: #fff;
        border:1px solid #e4e7ed;
        border-radius: 4px;
        margin: 3px;
        padding: 5px 8px;
        box-sizing: border-box;
        cursor: pointer;
        transition: all .3ms ease-in-out;
        user-select: none;
        display: flex;
        align-items: center;
        &:hover{
            box-shadow: 0px 0px 20px rgba(46, 21, 236, 0.42);
            cursor: all-scroll;
        }
    }
}
.el-card {
    margin:10px;
    &:first-child{
        margin-top: 0;
    }
}
</style>
